import React, { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { AreaHeaderWrapper } from './style';
import { Link, NavLink } from 'react-router-dom';

interface IProps {
  children?: ReactNode;
  title: string
  morepath?: string
}

const AreaHeaderV1: FC<IProps> = (props: IProps) => {
  const { title, morepath } = props;

  let text = ""
  if (morepath?.startsWith("/discover")) {
    text = morepath?.replace("/discover/", "")
  }
  return (
    <AreaHeaderWrapper>
      <div className="title">{title}</div>
      {
        morepath?.startsWith("/discover") ?
          morepath && <NavLink to={{ pathname: morepath }} state={{ index: text === "排行榜" ? 4 : 1 }} className="more">
            查看全部
          </NavLink> :
          morepath && <Link to={morepath} className="more">
            查看全部
          </Link>
      }
    </AreaHeaderWrapper >
  );
};

export default memo(AreaHeaderV1);
